<template>
  <div class="dashboard">
    <Sidebar />

    <main class="content">
      <section class="intro-banner">
        <div class="banner-content">
          <div>
            <h2>智能学情分析</h2>
            <p>AI与教学评估深度融合，精准实现了学生个体水平和需求差异的数据化评估。</p>
          </div>
          <el-button class="custom-button">深入了解</el-button>
        </div>
        <div class="third-square"></div>
      </section>


      <section class="charts">
        <div class="chart attention-curve">
          <el-card title="注意力曲线" class="chart-card1">
            <!-- 在这里插入图表 -->
            <div>注意力曲线</div>
            <AttentionAnalysis />
          </el-card>
        </div>

        <div class="charts-row">
          <div class="chart participation">
            <el-card title="课堂参与度" class="chart-card">
              <div>课堂参与度</div>
              <ClassParticipation />
            </el-card>
          </div>
          <div class="chart attendance">
            <el-card title="课堂出勤情况" class="chart-card">
              <div>课堂出勤情况</div>
              <ClassAttendance />
            </el-card>
          </div>
        </div>
      </section>


      <section class="video-monitor">
        <el-card class="video-card" :body-style="{ padding: '20px' }">
          <h3>课堂实时监控</h3>
          <div class="video-placeholder">
            <el-button type="primary" size="large">播放</el-button>
          </div>
        </el-card>
      </section>
    </main>
  </div>
</template>

<script setup>
import Sidebar from '@/components/Sidebar.vue'
import AttentionAnalysis from '@/views/Teacher/components/AttentionAnalysis.vue'
import ClassParticipation from '@/views/Teacher/components/ClassParticipation.vue'
import ClassAttendance from '@/views/Teacher/components/ClassAttendance.vue'
</script>

<style scoped>
.dashboard {
  display: flex;
  background-color: #f8f8f8;
  height: 100vh;
}

.content {
  flex: 1;
  padding: 20px;
}

.custom-button {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: background-color 0.3s;
}

.custom-button:hover {
  background-color: #0056b3;
}

.intro-banner {
  position: relative;
  background-color: #8FC6FF;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  width: 40%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 160px;
  overflow: hidden;
}
.intro-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50;
  width: 120px;
  height: 80px;
  background-color: white;
  transform: rotate(-50deg);
  z-index: 0;
  border-radius: 4px;
}


.intro-banner::after {
  content: '';
  position: absolute;
  top: 100px;
  left: 310px;
  width: 120px;
  height: 80px;
  background-color: white;
  transform: rotate(-50deg);
  z-index: 0;
  border-radius: 4px;
}


.third-square {
  position: absolute;
  top: 135px;
  left: 230px;
  width: 110px;
  height: 80px;
  background-color: white;
  transform: rotate(-50deg);
  z-index: 0;
  border-radius: 4px;
}

.banner-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2 ;
}

.banner-content div {
  max-width: 70%;
  margin-right: 100px;
  flex: 1;
}

.banner-content h2 {
  font-size: 18px;
  color: white;
  text-align: left;
  margin: 0;
}

.banner-content p {
  margin: 0;
  color: rgb(10, 10, 10);
  font-size: 13px;
  text-align: left;
  margin-top: 10px;
}

.custom-button {
  background-color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  margin-top: 60px;
  margin-right: 30px;
}

.custom-button:hover {
  background-color: #e0e0e0;
}


.charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart {
  flex: none;
  width: 200px;
}

.charts-row {
  display: flex;
  justify-content: flex-start;
  gap: 50px;
  margin-top: 40px;
}

.chart-card1 {
  width: 580px;
  height: 270px;
}
.chart-card {
  height: 300px;
}
.participation,
.attendance {
  width: 265px;
  margin: 0;
}

.video-monitor {
  margin-top: -700px;
  display: flex;
  justify-content: flex-end;
}

.video-card {
  background-color: white;
  width: 55%;
  height: 650px;
}

.video-placeholder {
  height: 600px;
  background-color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  position: relative;
}

.video-placeholder .el-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
